<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定时器</title>
    <style>
        #root {
            width: 200px;
            height: 200px;
            background-color: palevioletred;
        }

        .gg {
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>

<body>
    <div id="root">
        <div class="gg">广告</div>
    </div>
    <button class="b1">停止计时器</button>
    <button class="b2">停止</button>
</body>
<script>
    /* 
    定时器
        setTimeout(函数,[毫秒数])
            定时器到时间后执行函数 只调用一次
            定时器加标志符
                let t1= setTimeout()
        setInterval()
    */
    /* 
    回调函数callback
        回头调用 上件事干完再回头调用这个函数
    */
    let t1 = setTimeout(() => {
        console.log(Date.now())
    }, 1000)
    let t2 = setTimeout(() => {
        console.log('t2');
    }, 3000)
    let t3 = setTimeout(() => {
        let root = document.querySelector('#root')
        root.children[0].style.display = 'none'
    }, 5000)
    /* 
    停止计时器
        clearTimeout(t1)
    */
    let t4 = setTimeout(() => {
        console.log('5秒')
    }, 5000)
    document.querySelector('button.b1').addEventListener('click', () => {
        clearTimeout(t3);
    })
    /* 
    setInterval(函数,毫秒数)  倒计时 
        重复调用·一个函数 每隔一段时间去调用一次函数 
    clearInterval()
    */
   let sum=0
   let s1= setInterval(()=>{
        console.log(sum)
        sum++;
    },1000)
    document.querySelector('button.b2').addEventListener('click',()=>{
            clearInterval(s1)
    })
</script>

</html>